<template>
	<view class="con">
		<!-- <image v-if="picmode" :src="backgroundImage" :style="{height:bgh}" class="back"></image>
		<view v-else="" :style="{height:bgh,'background-color':backgroundColor}" class="back"></view> -->
		<view class="stage" @touchstart="updateStart" @touchmove="updateMove" @touchend="updateEnd">
			<view class="box" :style="{transform:'rotateY('+ss+'deg)'}" :class="[vtouch&&touching?'':'slow']">
				<view class="box-img" style="position: relative;" v-for="(img,index) in images" :key="index"
					:style="{'-webkit-transform': 'rotateY('+(index*de)+'deg) translateZ('+(wi)+')',transform: 'rotateY('+(index*de)+'deg) translateZ('+(wi)+')'}">
					<!-- <view class="box-img"> -->
					<image :src="img.optnImg" mode="widthFix" :class="[vertical?'hrect-image':'vrect-image']"
						@click.stop="index==current? tran(img,index):''">
					</image>
					<view :class="['flex-cc','optn-content-position']">
						<view :class="[current == index?'optn-seltct-y':'optn-seltct-n','flex-cc']">
							{{selectSerialNumber[index]}}
						</view>
						<view class="select-index-optn-font">{{img.optnContent}}</view>
					</view>
					<!-- <image src="../../../static/images/er.png" :class="[vertical?'hrect-image':'vrect-image']" mode=""></image> -->
					<!-- <view class="title" :style="{'background-color':backcolor,'color':fontcolor,'text-align':titleAlign,top:titleBottom?imgh:'0px'}">{{img.title}}</view> -->
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "hj3-display-images",
		props: {
			currentQstnIndex: Number,
			images: {
				type: Array,
			},
			vertical: {
				type: Boolean,
				default: true
			},
			vtouch: {
				type: Boolean,
				default: true
			},
			autoplay: {
				type: Boolean,
				default: false
			},
			interval: {
				type: Number,
				default: 3000
			},
			clockwise: {
				type: Boolean,
				default: false
			},
			titleBottom: {
				type: Boolean,
				default: false
			},
			backcolor: {
				type: String,
				default: 'rgba(0,0,0,0.2)'
			},
			fontcolor: {
				type: String,
				default: 'black'
			},
			titleAlign: {
				type: String,
				default: 'center'
			},
			background: String
		},
		computed: {
			picmode: function() {
				return !!this.backgroundImage
			},
			de: function() {
				return 360 / this.images.length
			},
			wi: function() {
				return uni.upx2px(400) + 'px';
			},
			btm: function() {
				if (this.vertical) {
					if (this.titleBottom) {
						return uni.upx2px(320) + 'px';
					}
					console.log(uni.upx2px(240), 'uni.upx2px(240)')
					return uni.upx2px(240) + 'px';
				}
				// if (this.titleBottom) {
				// 	return uni.upx2px(820) + 'px';
				// 	return uni.upx2px(740) + 'px';
				// }
			},
			bgh: function() {
				if (this.vertical) {
					if (this.titleBottom) {
						return uni.upx2px(620) + 'px';
						return uni.upx2px(540) + 'px';
					}

				}
				if (this.titleBottom) {
					return uni.upx2px(1600) + 'px';
					return uni.upx2px(1520) + 'px';
				}

			},
			imgh: function() {
				if (this.vertical) return uni.upx2px(150) + 'px';
				else return uni.upx2px(416) + 'px';
			},
			hasTitle: function() {
				return this.images.some(ele => ele.title)
			}
		},
		data() {
			return {
				current: 0,
				ss: 0,
				start: null,
				last: null,
				touching: false,
				temp: 0,
				backgroundColor: 'rgba(0,0,0,0)',
				backgroundImage: null,
				clickData: null,
				selectSerialNumber: ['A', 'B', 'C', 'D']
			}
		},
		methods: {
			tran(item, index) {
				let old = this.current
				this.current = index;
				this.clickData = item
				// let c = (index - old) * this.de
				// if (Math.abs(c) > 180) {
				// 	if (c > 0) c = Math.abs(c) - 360
				// 	else c = 360 - Math.abs(c)
				// }
				// this.ss += -c;
				this.$emit('itap', item, index, this.currentQstnIndex)
			},
			updateStart: function(e) {
				if (this.vtouch) {
					this.touching = true;
					this.start = this.ss;
					this.last = e.touches[0].pageX;
				}
			},
			updateMove: function(e) {
				if (this.vtouch) {
					this.$emit('saveScroll', false)
					let np = e.touches[0].pageX;
					let tc = np - this.last;
					this.last = np;
					this.ss += tc;
				}

			},
			updateEnd: function(e) {
				if (this.vtouch) {
					this.touching = false;
					this.$emit('saveScroll', true)
					let fc = this.ss - this.start;
					let c = Math.round(fc / this.de);
					if (this.current == -1) {
						this.current = 0
					}
					let index = (this.current - c) % 4;
					this.current = index >= 0 ? index : (4 + index)
					console.log(this.current, 'this.clickData')
					this.clickData = this.images[this.current]
					this.tran(this.clickData, this.current)
					this.ss = this.start + c * this.de;
					this.start = null;
				}
			},
			autoPlay: function() {
				setTimeout(() => {
					if (this.start === null) {
						if (this.clockwise)
							this.ss -= this.de;
						else
							this.ss += this.de;
					}
					this.autoPlay()
				}, this.interval)
			}
		},
		mounted() {
			this.clickData = this.images[0]
		},
		created: function() {
			if (this.images.length < 5 || this.images.length > 10) {
				console.warn("图片最好控制在5-9张，可以通过处理images实现")
			}
			this.images.forEach((e) => {
				e.optnImg = '../../../static/images/画板.png'
			})
			// if (this.autoplay)
			// 	this.autoPlay()
			// if (this.background.slice(0, 3) == 'rgb' || this.background.slice(0, 1) == '#') {
			// 	this.backgroundColor = this.background
			// } else {
			// 	this.backgroundImage = this.background
			// }
			// this.clickData = this.images[0]
			// console.log(this.clickData,this.images,'this.clickData')
		}
	}
</script>

<style scoped="" lang="scss">
	.optn-content-position {
		position: absolute;
		left: 50%;
		top: 530rpx;
		transform: translateX(-50%);
	}

	.optn-seltct-y {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background: #5DFFF0;
		font-weight: bold;
		font-size: 24rpx;
		color: #064C46;
	}

	.optn-seltct-n {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background: #C16EAE;
		font-weight: bold;
		font-size: 24rpx;
		color: #040404;
	}

	.select-index-optn-font {
		font-size: 42rpx;
		color: #FFFFFF;
		margin-left: 12rpx;
	}

	.box-img {
		transform-origin: center;
	}

	.con {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		.stage {
			display: block;
			position: absolute;
			top: 0rpx;
			// -webkit-perspective: 800rpx;
			perspective: 1000;
			background-color: blue;
			transform: scale(0.78);
		}

		.back {
			position: absolute;
			width: 100%;
		}

		.box {
			transform-style: preserve-3d;
			-webkit-transform-style: preserve-3d;
			position: relative;
			width: 460upx;

			.title {
				position: absolute;
				width: 240upx;
				height: 36upx;
				font-size: 28upx;
			}

			.mask {
				width: 325rpx;
				height: 304rpx;
				// visibility: collapse;
				background-color: red;
				position: absolute;
				top: 0;
				z-index: 2;
			}

			image {
				// z-index: 10;
				position: absolute;
				width: 460upx;
				// box-shadow: -3upx 5upx 3upx rgba(0, 0, 0, 0.3);
			}

			.vrect-image {
				height: 416upx;
			}

			.hrect-image {
				// height: 235rpx;
			}
		}

		.slow {
			transition-duration: 1s;
		}
	}
</style>